<template>
    <div class="console-box" :class="{'hideConsoleBox': !showConsoleBox}">
        <el-tooltip effect="dark" content="开发者工具" placement="top">
            <el-badge class="console-btn" is-dot>
                <i class="iconfont icon-kongzhitai" @click="showConsoleBox = !showConsoleBox"></i>
            </el-badge>
        </el-tooltip>
        <el-tabs v-model="value" type="border-card">
            <el-tab-pane v-for="(item, i) in consoleTabs" :key="i" :label="item.name" :name="`${i}`">
                <component v-if="`${i}` === value" :is="item.component"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import ErrorLog from './ErrorLog'
import WarnInfo from './WarnInfo'
export default {
    name: 'ConsoleBox',
    data () {
        return {
            value: '0',
            showConsoleBox: false,
            consoleTabs: [
                { name: '错误日志', component: ErrorLog },
                { name: '警告信息', component: WarnInfo }
            ]
        }
    }
}
</script>
<style lang="less">
    .console-box {
        border-top: 1px solid #DCDFE6;
        z-index: 2;
        bottom: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 200px;
        .el-tabs__content {
            overflow: auto !important;
        }
        .console-btn {
            background: #fff;
            position: absolute;
            top: -40px;
            right: 13px;
        }
        .icon-kongzhitai {
            cursor: pointer;
            font-size: 20px;
        }
    }
    .hideConsoleBox {
        bottom: -200px;
    }
</style>
